<template>
  <div id="page-club-message">
    <h2>俱乐部留言</h2>

    <card class="mt10">
      <Table
        :columns="columns"
        :data="list"
        :loading="loading"
        no-data-text="该查询条件没有任何数据"
        class="mt20">
      </Table>

      <div class="m10 clearfix" v-if="page.total > 0">
        <div class="fr">
          <Page
            show-total
            :total="page.total"
            :current="query.currentPage"
            @on-change="onChangePage">
          </Page>
        </div>
      </div>
    </card>

    <reply-modal :form="form" @submit="getList"></reply-modal>
  </div>
</template>

<script>
  import { mapGetters } from 'vuex'
  import moment from 'moment'
  import clubApi from '@/api/club'
  import replyModal from './components/message/reply-modal'
  import expandRow from './components/message/expand-row'

  export default {
    name: 'page-club-message',
    components: {
      replyModal,
      expandRow
    },
    data () {
      return {
        loading: false,
        query: {
          sourceId: null,
          currentPage: 1,
          limit: 10
        },
        page: {
          total: 0
        },
        columns: [
          {
            type: 'expand',
            width: 50,
            render: (h, params) => {
              return h(expandRow, {
                props: {
                  row: params.row
                }
              })
            }
          },
          {
            title: '序号',
            width: 50,
            align: 'center',
            render: (h, params) => {
              return (this.query.currentPage - 1) * this.query.limit + params.row._index + 1
            }
          },
          {
            title: '留言人',
            align: 'center',
            key: 'leaveUserName'
          },
          {
            title: '留言内容',
            align: 'center',
            key: 'leaveContent',
            render: (h, params) => {
              let { row } = params
              if (row.leaveContent && row.leaveContent.length > 10) {
                return row.leaveContent.substring(0, 10) + '...'
              } else {
                return row.leaveContent
              }
            }
          },
          {
            title: '留言时间',
            align: 'center',
            key: 'leaveTime',
            width: 180,
            render: (h, params) => {
              let { row } = params
              return moment(row.leaveTime).format('YYYY-MM-DD HH:mm:ss')
            }
          },
          {
            title: '外网显示',
            align: 'center',
            key: 'isShow',
            render: (h, params) => {
              let { row } = params
              return row.isShow === '0' ? '显示' : '不显示'
            }
          },
          {
            title: '回复内容',
            align: 'center',
            key: 'reContent',
            render: (h, params) => {
              let { row } = params
              if (row.reContent && row.reContent.length > 10) {
                return row.reContent.substring(0, 10) + '...'
              } else {
                return row.reContent
              }
            }
          },
          {
            title: '回复时间',
            align: 'center',
            width: 180,
            key: 'reTime',
            render: (h, params) => {
              let { row } = params
              if (row.reTime) {
                return moment(row.reTime).format('YYYY-MM-DD HH:mm:ss')
              } else {
                return '-'
              }
            }
          },
          {
            title: '点赞总数',
            align: 'center',
            key: 'thumbUp'
          },
          {
            title: '状态',
            align: 'center',
            key: 'reContent',
            render: (h, params) => {
              let { row } = params
              return row.reContent ? '已回复' : '未回复'
            }
          },
          {
            title: '操作',
            align: 'center',
            width: 120,
            render: (h, params) => {
              let { row } = params
              return h('div', [
                h('Button', {
                  props: {
                    type: 'primary',
                    size: 'small'
                  },
                  style: {
                    marginRight: '5px'
                  },
                  on: {
                    click: () => {
                      this.showReplyModal(row)
                    }
                  }
                }, '回复'),
                h('Button', {
                  props: {
                    type: 'error',
                    size: 'small'
                  },
                  on: {
                    click: () => {
                      this.onRemove(row)
                    }
                  }
                }, '删除')
              ])
            }
          }
        ],
        list: [],
        form: {
          visible: false,
          data: {
            isShow: 0
          },
          template: {}
        }
      }
    },
    watch: {
      'query.currentPage': 'getList'
    },
    computed: {
      ...mapGetters({
        userInfo: 'userInfo'
      })
    },
    methods: {
      onChangePage (currentPage) {
        this.query.currentPage = currentPage
      },
      showReplyModal (row) {
        this.form.data.pkLeaveMessage = row.pkLeaveMessage
        this.form.visible = true
      },
      onRemove (detail) {
        this.$Modal.confirm({
          title: '确认删除吗',
          content: '<p>删除后将不能恢复，确定删除？</p>',
          onOk: () => {
            this.remove(detail)
          }
        })
      },
      async remove (detail) {
        const { body } = await clubApi.messageRemove({ pkLeaveMessage: detail.pkLeaveMessage })
        if (this.$apiHelper.requestSuccessed(body.responseCode)) {
          this.$Message.info('删除成功')
          this.getList()
        } else {
          setTimeout(() => {
            this.$Modal.error({
              title: '错误',
              content: body.desc,
              onOk: () => {}
            })
          }, 500)
        }
      },
      async getList () {
        this.loading = true
        this.query.sourceId = this.userInfo.pkRclubInfo
        const { body } = await clubApi.messageList(this.query)
        const { responseData } = body
        this.loading = false
        this.list = responseData.content
        this.page.total = responseData.totalElements
      }
    },
    mounted () {
      this.getList()
    }
  }
</script>
